<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta charset="UTF-8" />
	<title>Autocomplete Demos</title>
	<script type="text/javascript">
		var Global = {
			contextPath:'/bingo.ui.framework'
		} 
	</script>
	<script src="../../../../scripts/jquery.js" type="text/javascript"></script>
	<script src="../../../../scripts/jquery.utils.js" type="text/javascript"></script>

	<script src="../../../../scripts/jquery_ui/jquery.ui.core.js" type="text/javascript" ></script>
	<script src="../../../../scripts/jquery_ui/jquery.ui.widget.js" type="text/javascript" ></script>
	<script src="../../../../scripts/jquery_ui/jquery.ui.position.js" type="text/javascript" ></script>
	
	<link  href="../../../../themes/default/ui.css" type="text/css" rel="stylesheet" />
	
	<!-- 换肤 -->
	<script type="text/javascript" src="../../../theme_cookie.js"></script>
		
	<script src="../jquery.ui.autocomplete.js" type="text/javascript"></script>
	<link  href="../autocomplete.css" type="text/css" rel="stylesheet" />
	
	<link type="text/css" href="../../../demos.css" rel="stylesheet" />
	<script src="../../../../scripts/jquery_plugins/jquery.json.js" type="text/javascript"></script>
	
	<link  href="http://127.0.0.1:8080/ims/themes/default/style.css" type="text/css" rel="stylesheet"/>
		<link  href="http://127.0.0.1:8080/ims/themes/default/ui.css" type="text/css" rel="stylesheet" id="themesLink" />
		<link  href="http://127.0.0.1:8080/ims/themes/common/icon.css" type="text/css" rel="stylesheet" />

		<link  href="http://127.0.0.1:8080/ims/widgets/core/layout/layout.css" type="text/css" rel="stylesheet" />
		<link  href="http://127.0.0.1:8080/ims/widgets/core/dialog/ui.dialog.css" rel="stylesheet"  type="text/css"/>
		<link  href="http://127.0.0.1:8080/ims/widgets/core/tree/ui.tree.css" rel="stylesheet" type="text/css" />
		
		<!-- 右键菜单相关JS和CSS -->
		<link  href="http://127.0.0.1:8080/ims/widgets/core/contextmenu/contextmenu.css" rel="stylesheet" type="text/css" />
		<link  href="http://127.0.0.1:8080/ims/widgets/ezgrid/grid-all.css" rel="stylesheet" type="text/css" />
		<link  href="http://127.0.0.1:8080/ims/widgets/core/button/button.css" rel="STYLESHEET" type="text/css" />
		<link  href="http://127.0.0.1:8080/ims/widgets/core/blockui/jquery.blockui.css" type="text/css" rel="stylesheet" />
		<link  href="http://127.0.0.1:8080/ims/widgets/core/autocomplete/autocomplete.css" type="text/css" rel="stylesheet" />

	<script>
		$( function(){
			$("#static_combo").comboBox({
				editable:true ,
				focusDrop:false
			});

			$('#asyn_combo').comboBox({
				source : 'remote',
				width  : 83,
	       		CommandName : 'sqlid:autocomplete.test',
	       		variableName : 'INPUT_VALUE',
	       		params : {
					daoBeanName:'dao',
	       		    catalogId : 'sale',
	       		    sqlId:'autocomplete.test'
	           	}
			});

			$('#getValue').click(function(){
				$('.value').removeClass('ui-helper-hidden').html( jQuery.json.encode($('select').comboBox().getValue()) ) ;
			}) ;
		} ) ;
	</script>
</head>

<body>
	<a href='javascript:' id='getValue'>getValue</a>
	<br/><br/>
		<div class='ui-state-highlight value ui-helper-hidden'></div>
	<br/><br/>
	<div style="padding-left:30px;">
	静态数据Combo:
     <select id="static_combo">
		<option value="a">asp</option>
        <option value="c" selected>c</option>
        <option value="cpp">c++</option>
        <option value="cf">coldfusion eeeeeeeeeeee</option>
        <option value="g">groovy</option>
        <option value="h">haskell</option>
        <option value="j">java</option>
        <option value="js">javascript</option>
        <option value="p1">perl</option>
        <option value="p2">php</option>
        <option value="p3">python</option>
        <option value="r">ruby</option>
        <option value="s">scala</option>
	</select>
	<br/><br/><br/><br/>
	异步数据Combo:
	<select id="asyn_combo" style="width:100px;">
	</select>
	</div>
</body>
</html>